import React, { useEffect, useState } from "react"
import { Button, Col, Row, Pagination, message } from 'antd';
import GoodsItem from "../../components/GoodsItem"
import AddGoodsModal from "../../components/addGoodsModal"
import EditGoodsModal from "../../components/editGoodsModal"
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { get } from "../../util/get"
import style from "./index.module.css"
// 商家查看自己的商品
export default function GooodsList() {
    const [addVisible, setAddVisible] = useState(false)
    const [editvisible, setEditVisible] = useState(false)
    const [page, setPage] = useState(1)
    const [data, setData] = useState([])
    const [total, setTotal] = useState(0)
    const location = useLocation()
    const token = localStorage.getItem('TOKEN')
    const storeId = location.pathname.split('/')[2];
    useEffect(() => {
        (async () => {
            if(!editvisible){
                const res = await get(`/product/product/list?shopId=${storeId}&page=${page}&limit=6`, token)
                // console.log(res);
                if (res.data.code === 0) {
                    setData(res.data.page.list)
                    setTotal(res.data.page.totalCount)
                    setPage(res.data.page.currPage)
                }else message.error(res.data.msg)
            }
            
        })()
    }, [token, page, storeId,editvisible])
    const handleEdit = (id) => {

    }
    return (
        <>
            <Button type="primary" onClick={() => { setAddVisible(true) }}>新增商品</Button>
            <AddGoodsModal visible={addVisible} setVisible={setAddVisible}></AddGoodsModal>
            <EditGoodsModal visible={editvisible} setVisible={setEditVisible}></EditGoodsModal>
            <Row gutter={[8, 16]} className={style.goodslist}>
                {
                    data.map(item =>
                        <Col span={7} key={item.id}>
                            <GoodsItem data={item} setVisible={setEditVisible}></GoodsItem>
                        </Col>
                    )
                }
            </Row>
            <Pagination
                className={style.pagination}
                current={page} defaultPageSize={8}
                total={total} onChange={page => {
                    setPage(page);
                }} />
        </>
    )
}